<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Page for dojo/dom.setSelectable</title>
		<style>
			@import "../resources/dojo.css";
			#test {
				border: 1px solid #000;
				padding: 10px;
			}
			.item {
				float: left;
				padding: 10px;
			}
			.item td {
				border: 1px solid #ccc;
			}
			.clear {
				clear: both;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<h1>Test Page for dojo/dom.setSelectable</h1>
		<p>Use the buttons below and then attempt selecting in the bordered area
			underneath.</p>
		<p>
			<button onclick="makeSelectable(true);">Allow Selection</button>
			<button onclick="makeSelectable(false);">Prevent Selection</button>
		</p>
		<div id="test">
			<p>Some notes:</p>
			<ul>
				<li>In WebKit and IE10, <code>*-user-select: none</code> doesn't prevent you from
					selecting within textboxes, whereas in Firefox it does</li>
				<li>The <code>unselectable</code> attribute (used where <code>user-select</code>
					is unavailable, e.g. IE &lt; 10 and Opera) does not prevent text selection
					when the selection is started from outside the node in question</li>
				<li>In IE10, <code>-ms-user-select</code> exhibits the same behavior as
					described in the previous bullet; all other browsers which implement
					<code>*-user-select</code> seem to properly prevent selection even
					when it is started outside of the node in question</li>
				<li>Opera doesn't honor the <code>unselectable</code> attribute on textboxes</li>
				<li>IE honors <code>unselectable</code> on textboxes, but moreover, it
					prevents any input whatsoever</li>
			</ul>
			<div class="item">
				Some text
			</div>
			<table class="item">
				<tr>
					<td>A</td>
					<td>table</td>
					<td>here</td>
				</tr>
			</table>
			<div class="clear">
				<input type="text" value="an input here">
			</div>
			More text here
		</div>
		<script src="../dojo.js"></script>
		<script>
			var makeSelectable; // function to be defined below
			require(["dojo/dom", "dojo/domReady!"], function(dom){
				makeSelectable = function(selectable){
					dom.setSelectable("test", selectable);
				};
			});
		</script>
	</body>
</html>
